import * as echarts from 'echarts/core';
// 导入所有图表（按需选，若要全量图表可这样写）
import * as charts from 'echarts/charts'; 
// 导入所有组件（如坐标轴、图例等）
import * as components from 'echarts/components'; 
// 导入渲染器（Canvas 或 SVG，根据需求选）
import { CanvasRenderer } from 'echarts/renderers'; 

// 注册所有图表、组件、渲染器
echarts.use([...Object.values(charts), ...Object.values(components), CanvasRenderer]);


export function initHorizontalBar(chartDom, chartData) {
  if (!chartDom) {
    console.error('ECharts 容器 DOM 不存在');
    return () => {};
  }

  const myChart = echarts.init(chartDom);
  
  const option = {
    xAxis: {
      type: 'value', // 数值轴
      axisLabel: { color: '#666', fontSize: 12 },
      splitLine: { show: false }
    },
    yAxis: {
      type: 'category', // 类目轴
      data: chartData.categories,
      axisLabel: { color: '#666', fontSize: 12 },
      axisTick: { show: false }
    },
    series: [
      {
        name: '温度',
        type: 'bar',
        barCategoryGap: '40%', // 类目间距
        data: chartData.values, // 一维数据
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [{ offset: 0, color: '#FF7A59' }, { offset: 1, color: '#4D83FF' }]
          )
        },
        label: {
          show: true,
          position: 'right', // 数值显示在柱子右侧
          fontSize: 12,
          color: '#333'
        }
      }
    ]
  };

  myChart.setOption(option);

  // 绑定 resize 事件
  const resizeHandler = () => myChart.resize();
  window.addEventListener('resize', resizeHandler);

  return () => {
    myChart.dispose();
    window.removeEventListener('resize', resizeHandler);
  };
}